<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.tab {
				width: 590px;
				height: 340px;
				margin: 20px;
				border: 1px solid #e4e4e4;
			}

			.tab-nav {
				width: 100%;
				height: 60px;
				line-height: 60px;
				display: flex;
				justify-content: space-between;
			}

			.tab-nav h3 {
				font-size: 24px;
				font-weight: normal;
				margin-left: 20px;
			}

			.tab-nav ul {
				list-style: none;
				display: flex;
				justify-content: flex-end;
			}

			.tab-nav ul li {
				margin: 0 20px;
				font-size: 14px;
			}

			.tab-nav ul li a {
				text-decoration: none;
				border-bottom: 2px solid transparent;
				color: #333;
			}

			.tab-nav ul li a.active {
				border-color: #e1251b;
				color: #e1251b;
			}

			.tab-content {
				padding: 0 16px;
			}

			.tab-content .item {
				display: none;
			}

			.tab-content .item.active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="tab">
			<div class="tab-nav">
				<h3>每日特价</h3>
				<ul>
					<li><a class="active" href="javascript:;">精选</a></li>
					<li><a href="javascript:;">美食</a></li>
					<li><a href="javascript:;">百货</a></li>
					<li><a href="javascript:;">个护</a></li>
					<li><a href="javascript:;">预告</a></li>
				</ul>
			</div>
			<div class="tab-content">
				<div class="item active">
					<img src="../images/20241114/tab00.png" alt="" />
				</div>
				<div class="item"><img src="../images/20241114/tab01.png" alt="" /></div>
				<div class="item"><img src="../images/20241114/tab02.png" alt="" /></div>
				<div class="item"><img src="../images/20241114/tab03.png" alt="" /></div>
				<div class="item"><img src="../images/20241114/tab04.png" alt="" /></div>
			</div>
		</div>

		<script>
			// 开发要求：鼠标移到对应上方的标题上时，下方对应的区域要显示相应的内容
			const aList = document.querySelectorAll(".tab-nav a");
			const itemList = document.querySelectorAll(".tab-content .item");
			for (let i = 0; i < aList.length; i++) {
				aList[i].addEventListener("mouseenter", function () {
					document
						.querySelector("ul .active")
						.classList.remove("active");
					this.classList.add("active");

					document
						.querySelector(".item.active")
						.classList.remove("active");
						itemList[i].classList.add("active");
				});
			}
		</script>
	</body>
</html>
